<template>
	<view>
		<!-- 顶部占位栏（适配状态栏 + 导航栏） -->
			<view :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="content">
					<!-- 搜索框 -->
				<!-- 	<view class="search"   @click="toSearch(this.postAllId)">
						<uni-card>
							<u-search placeholder="绒花制作流程"></u-search>
						</uni-card>
					</view> -->
			
					<!-- 帖子 -->
				
			<view class="modern-post-list">
					        <view class="modern-post"v-for="item in postList" @click="toDetailPage(item.postId)">
					            <view class="post-header">
					                <image class="post-avatar" :src="'http://121.40.246.29/prod-api'+item.communityUserNameDD.avatar"></image>
					                <view class="post-user">
					                    <text class="post-username">{{item.communityUserNameDD.userName}}</text>
					                    <text class="post-time">{{item.createTime}}</text>
					                </view>
					                <view class="post-tag">非遗·{{item.communityBooksAllNameDD.allName}}</view>
					            </view>
					            <view class="post-body">
					                <text class="post-title">{{item.postTitle}}</text>
					                <text class="post-content">{{item.postContent}}</text>
					            </view>
					        </view>
					    </view>
					<!-- 悬浮按钮 -->
				<view class="float-btn" @click="toWrite">
				    <u-icon name="edit-pen" size="28" color="#ffffff"></u-icon>
				    <text class="btn-text">发布</text>
				  </view>
				</view>
	</view>

</template>

<script>
	export default {
	 data() {
	    return {
				statusBarHeight: 0,
	      postAllId: 0,
	      postList: []
	    }
	  },
	  onLoad(option) {
		  const systemInfo = uni.getSystemInfoSync();
		  		this.statusBarHeight = systemInfo.statusBarHeight || 0;
	    this.postAllId = option.postAllId;
		// console.log("22222222")
		// console.log(this.postAllId)
	    this.getPost(); // 首次加载数据
	  },
	  onShow() {
	    // 每次页面显示时刷新数据
	    this.getPost();
	    
	    // 监听发布成功事件（保留原有逻辑）
	    uni.$on('postPublished', this.getPost);
	  },
	  onUnload() {
	    // 移除监听，避免内存泄漏
	    uni.$off('postPublished', this.getPost);
	  },
		methods: {
			toSearch(postAllId){
				uni.navigateTo({
					url: `/pages/search/search-category/search-category?postId=${postAllId}`
				})
			},
			toDetailPage(postId) {
				uni.navigateTo({
					url: `/pages/community/detailPage/detailPage?postId=${postId}`
				})
			},
			gotoCommunityItem() {
				uni.navigateTo({
					url: '/pages/community/circleItem/circleItem'
				})
			},
			toWrite() {
				uni.navigateTo({
					url: `/pages/community/writeRecomment/writeRecomment?postAllId=${this.postAllId}`
				})
			},
			toDetailPage(postId) {
				uni.navigateTo({
					url: `/pages/community/detailPage/detailPage?postId=${postId}`
				})
			},
			getPost() {
			      uni.request({
			        url: this.$BASE_URL.baseUrl + '/community/post/list',
			        data: {
			          postAllId: this.postAllId,
			        },
			        success: (res) => {
			          this.postList = res.data.rows
			          console.log('数据已刷新', this.postList)
			        },
			        fail: (err) => {
			          console.error('刷新数据失败', err)
			        }
			      })
			    },
			
		}
	}
</script>

<style scoped lang="scss">
	//首页背景颜色样式
	page {
		background-color: #F4F0E7;
	}

	.content {
		padding: 10px 0px 10px;
		background-color: #F4F0E7;
	}

	.wrap {
		padding: 40rpx;
	}


	
	/* 社区帖子  */
	.modern-post-list {
	    padding: 0 20rpx;
	}
	
	.modern-post {
	    background: #fff;
	    border-radius: 16rpx;
	    padding: 30rpx;
	    margin-bottom: 24rpx;
	    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	}
	
	.post-header {
	    display: flex;
	    align-items: center;
	    margin-bottom: 20rpx;
	}
	
	.post-avatar {
	    width: 80rpx;
	    height: 80rpx;
	    border-radius: 50%;
	    margin-right: 20rpx;
	}
	
	.post-user {
	    flex: 1;
	}
	
	.post-username {
	    font-size: 28rpx;
	    color: #333;
	    font-weight: bold;
	    display: block;
	}
	
	.post-time {
	    font-size: 24rpx;
	    color: #999;
	}
	
	.post-tag {
	    background: #f5f5f5;
	    color: #7C191E;
	    padding: 6rpx 16rpx;
	    border-radius: 20rpx;
	    font-size: 22rpx;
	}
	
	.post-body {
	    padding-left: 100rpx;
	}
	
	.post-title {
	    font-size: 32rpx;
	    color: #222;
	    font-weight: bold;
	    display: block;
	    margin-bottom: 12rpx;
	}
	
	.post-content {
	    font-size: 28rpx;
	    color: #666;
	    line-height: 1.6;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 3;
	    overflow: hidden;
	}
	
	  /* 悬浮按钮样式 */
	  .float-btn {
	    position: fixed;
	    right: 40rpx;
	    bottom: 120rpx;
	    width: 120rpx;
	    height: 120rpx;
	    background: linear-gradient(135deg, #7C191E 0%, #d4a373 100%);
	    border-radius: 50%;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    color: #fff;
	    box-shadow: 0 8rpx 24rpx rgba(124, 25, 30, 0.3);
	    z-index: 999;
	    transition: all 0.3s ease;
	    
	    &:active {
	      transform: scale(0.95);
	      box-shadow: 0 4rpx 12rpx rgba(124, 25, 30, 0.3);
	    }
	    
	    .u-icon {
	      margin-bottom: 8rpx;
	    }
	    
	    .btn-text {
	      font-size: 24rpx;
	      font-weight: bold;
	    }
	  }
</style>